<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>实现vue组件之间的通信</title>
    <script src="../js/lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--父组件向子组件传递数据，使用props-->
    <son @connect="say"></son>
    <!--相比父→子组件通信，子→父组件就稍微繁琐一点。
    我们会使用到组件的一个知识点：自定义事件。
    每一个vue实例都实现了事件接口，
    我们可以用它提供的API $emit(eventName)来触发一个事件。
    子组件绑定自己methods方法，在子methods方法中实现触发父组件方法事件
    -->

</div>
<script>
    //注册子组件
    // Vue.component('son',{
    //     props:["message"],
    //    template:`<div>{{message}}</div>`
    // });
    Vue.component('son',{
       template:`<button @click="send">点击</button>`,
        data(){
           return{
               msg: "我是子组件里的数据"
            }
        },
        methods:{
           send(){
               this.$emit('connect', this.msg);
           }
        }
    });

    // 创建vm实例
    let vm = new Vue({
        //2、挂载元素
        el: "#app",
        data: {
            msg:'我是父组件里的数据'
        },
        methods:{
            say(msg){
                alert("我是被子组件触发的事件:"+msg);
            }
        }
    });
</script>
</body>
</html>